<template>
  <div class="kp-my">
	  <div class="kp-vheader" v-if="$route.meta.xheader"  
	  :class="$route.meta.xclass?$route.meta.xclass:''">
	  		  <!-- ########################左部内容################################## -->
	  		  <div class="kp-vheader-left" @click="backgo" v-if="$route.path!=='/index/scenic'">
	  			  <div class="kp-vheader-back" ></div><!-- //返回 -->
	  			  <div class="left-arrow"></div><!-- //左部角标 -->
	  		  </div>
	  		  <!-- ########################左部内容################################## -->
	  		  <!-- ########################中部内容################################## -->
	  		  <h1 class="kp-vheader-title">
				  <span v-if="$route.meta.xtitle?$route.meta.xtitle:false">{{ctitle}}</span>
			  </h1>
			  <!-- ########################中部内容################################## -->
			  <!-- ########################右部内容################################## -->
			  <div class="kp-vheader-right">
				 <a slot="right" v-if="$route.path=='/my/personalInfo'" @click="nicketSex" class="kp-right-set" >保存</a>
				 <a slot="right" v-if="$route.path=='/my/modifyNickname'" @click="nicketName" class="kp-right-set" >保存</a>
				 <a slot="right" v-if="$route.path=='/my/modifyAutograph'" @click="nicketAuto" class="kp-right-set" >保存</a>
				 <a slot="right" v-if="$route.path=='/my/modifyEmail'" @click="nicketEmail" class="kp-right-set" >保存</a>
				 <a slot="right" v-if="$route.path=='/my/modifyCard'" @click="nicketCard" class="kp-right-set" >保存</a>
				 <!--<a slot="right" v-if="$route.path=='/my/coupon/couponList'" class="kp-right-coupon" >兑换</a>-->
				 <router-link to="/my/rpb/rpblist" slot="right" v-if="$route.path=='/my/rpb'" class="kp-right-rpb" >红包明细</router-link>
				 <!--<a slot="right" v-if="$route.path=='/my/bank'" class="kp-right-bank" ></a>-->
			  </div>
			  <!-- ########################右部内容################################## -->
	</div>
	  <router-view></router-view>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { XHeader } from 'vux'
import { Login } from "../../api/api.js"
export default {
  data () {
    return {
      msg: 'HelloWorld123',
    }
  },
  mounted(){//载入后执行
  },
  created() {//创建后
      
  },
  watch: {//监听放置

  },
  methods: {//方法放置
		nicketName(){//更改昵称
			 this.$root.eventHub.$emit('nicketName'); //eventHub触发事件
		},
		nicketCard(){//实名认证
			 this.$root.eventHub.$emit('nicketCard'); //eventHub触发事件
		},
		nicketEmail(){//邮箱
			 this.$root.eventHub.$emit('nicketEmail'); //eventHub触发事件
		},
		nicketAuto(){//个性签名
			 this.$root.eventHub.$emit('nicketAuto'); //eventHub触发事件
		},
		nicketSex(){//性别
			 this.$root.eventHub.$emit('nicketSex'); //eventHub触发事件
		},
		backgo(){
				 this.$router.go(-1);
		}
  },
  components:{
	  XHeader
  },
  computed: mapGetters([
    'ctitle',
  ]),
}
</script>

<style scoped>
	/* /deep/深作用标识 */
.kp-my /deep/ .kp-vheader{
	height: 86px;
	padding: 0;
	position: fixed;
	width: 750px;
	z-index: 999;
	top: 0;
}
.kp-my /deep/ .kp-vheader .kp-vheader-title{
	font-size: 34px;
	height: 86px;
	line-height: 86px;
	margin:0 150px;
	overflow: hidden;
	text-align: center;
	font-weight: 400;
	color: #fff;
}
.kp-my /deep/ .kp-vheader .kp-vheader-left .left-arrow{
	width: 36px;
	height: 36px;
	background: url(../../assets/left-1.png) no-repeat center center;
	background-size:36px 36px;
	top: 25px;
	left: 20px;
	position: absolute;
}
.kp-my /deep/ .kp-vheader .kp-vheader-left{
	left: 0px;
	height: 86px;
	top: 0;
	width: 150px;
	position: absolute;
	display: block;
	font-size: 14px;
	line-height: 21px;
	color: #ccc;
}
.kp-my /deep/ .kp-vheader .kp-vheader-left .left-arrow:before{
	display: none;
}
.kp-my /deep/ .kp-vheader .kp-vheader-right{
	right: 0px;
	height: 86px;
	top: 0;
	width: 150px;
	line-height: 86px;
	text-align: right;
	position: absolute;
}
.kp-my /deep/ .kp-vheader .kp-vheader-right a{
		padding-right: 32px;
		margin: 0;
		float: right;
}
/* //导航样式开始 */
/***********************导航颜色*****************************/
/* //导航 青色*/
.kp-my /deep/ .cyan {
	  background:rgb(59,195,194);
	  z-index: 2;
}
/* //导航 透明*/
.kp-my /deep/ .transparent {
	  background:none;
}
/* //导航 白色*/
.kp-my /deep/ .white{
	background: #fff;
}
/* //导航 白色带底线*/
.kp-my /deep/ .white-border{
	background: #fff;
	border-bottom: 1px solid rgb(229,229,229);
}
.kp-my /deep/ .bank{
	background: #fff;
	border-bottom: 1px solid rgb(183,183,183);
}
.kp-my /deep/ .lxr{
	background: rgb(59, 195, 194);
}
.kp-my /deep/ .getcoupon{
	background: #fff;
}
/***********************导航字体颜色*****************************/
/* //白色导航 字体颜色*/
.kp-my /deep/ .white .kp-vheader-title{
	color: rgb(51,51,51);
}
.kp-my /deep/ .white-border .kp-vheader-title{
	color: rgb(51,51,51);
}
.kp-my /deep/ .coupon .kp-vheader-title{
	color: rgb(68,68,68);
}
.kp-my /deep/ .getcoupon .kp-vheader-title{
	color: rgb(51,51,51);
	font-size: 'PingFang-SC-Medium';
}
.kp-my /deep/ .bank .kp-vheader-title{
	color: rgb(68,68,68)!important;
}
/***********************导航左部按钮*****************************/
/* /导航左部返回按钮 透明导航返回*/
.kp-my /deep/ .transparent .kp-vheader-left .left-arrow{
	width: 25px;
	height: 44px;
	background: url(../../assets/left-2.png) no-repeat center center;
	background-size:25px 44px;
	top: 25px;
	left: 30px;
}
.kp-my /deep/ .sign .kp-vheader-left .left-arrow{
	width: 25px;
	height: 44px;
	background: url(../../assets/left-3.png) no-repeat center center;
	background-size:25px 44px;
	top: 25px;
	left: 30px;
}
.kp-my /deep/ .wallet .kp-vheader-left .left-arrow{
	width: 36px;
	height: 36px;
	background: url(../../assets/left-1.png) no-repeat center center;
	background-size:36px;
	top: 25px;
	left: 30px;
}
.kp-my /deep/ .bank .kp-vheader-left .left-arrow{
	width: 36px;
	height: 36px;
	background: url(../../assets/fanhui.png) no-repeat center center;
	background-size:36px;
	top: 25px;
	left: 30px;
}
/* /导航左部返回按钮 白色导航返回*/
.kp-my /deep/ .white .kp-vheader-left .left-arrow{
	width: 25px;
	height: 44px;
	background: url(../../assets/left-2.png) no-repeat center center;
	background-size:25px 44px;
	top: 25px;
	left: 30px;
}
.kp-my /deep/ .white-border .kp-vheader-left .left-arrow{
	width: 25px;
	height: 44px;
	background: url(../../assets/left-2.png) no-repeat center center;
	background-size:25px 44px;
	top: 25px;
	left: 30px;
}
.kp-my /deep/ .getcoupon .kp-vheader-left .left-arrow{
	width: 25px;
	height: 44px;
	background: url(../../assets/left-4.png) no-repeat center center;
	background-size:25px 44px;
	top: 25px;
	left: 30px;
}
/***********************导航右部按钮*****************************/
.kp-my /deep/ .transparent .kp-vheader-right a.kp-right-set{
	font-size: 32px;
	color: rgb(59,195,194);
}
.kp-my /deep/ .transparent .kp-vheader-right a.kp-right-sign{
	font-size: 28px;
	color: #fff;
}
.kp-my /deep/ .bank .kp-vheader-right a.kp-right-bank{
	display: inline-block;
	width: 44px;
	height: 44px;
	background:url("../../assets/jh.png") center no-repeat;
	background-size: 44px;
	padding-right: 0;
	float: right;
	margin: 21px 26px 0 0;
}

.kp-my /deep/ .coupon .kp-vheader-right a.kp-right-coupon{
	float: right;
	padding-right: 30px;
	font-size: 26px;
	color: rgb(59,195,194);
}
.kp-my /deep/ .white .kp-vheader-right a.kp-right-rpb{
	float: right;
	padding-right: 30px;
	font-size: 26px;
	color: rgb(59, 195, 194);
}
.kp-my /deep/ .white .kp-vheader-right a.kp-right-set{
	font-size: 32px;
	color: rgb(59,195,194);
}
/* 导航样式结束 */
</style>
